<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专题分类</title>

</head>

<body>
    <div id="myMessage">
        <!-- 左侧菜单 -->
        <div v-show="!isChat">
            <left-nav :menu="menu" @send-show-index="setShowIndex"></left-nav>
        </div>
        <div v-show="!isChat" class="messageList">
            <!-- 关注 -->
            <!-- 初始化时展示，为防止组件显示异常，在外层嵌套div -->
            <div style="display: block;">
                <ul>
                    <li v-for="f in followView">
                        <message-user-info @click="chat(f)" :f="f.follow" :total_message="f.communicates.count" :is_follow="true"></message-user-info>
                    </li>
                </ul>
            </div>
            <!-- 粉丝 -->
            <div>
                <ul>
                    <li v-for="f in fanView">
                        <message-user-info @click="chat(f)" :f="f.follow" :total_message="f.communicates.count" :is_follow="false"></message-user-info>
                    </li>
                </ul>
            </div>
            <!-- 评论 -->
            <div>
                <ul>
                    <li v-for="c in comments">
                        <div class="center">
                            <a :href="'/user/' + c.userId">
                                <div class="headImage" :style="{'background-image':'url(' + c.headImage + ')'}">
                                    {{c.name}}
                                </div>
                            </a>
                            <div style="width: 68%;">
                                <p class="articleTitle">
                                    在文章
                                    <a :href="'/articleDetail/'+c.articleId">《{{c.title}}》</a>
                                    中评论了您
                                </p>
                                <span class="small gray">{{c.createTime}}</span>

                                <p class="content">{{c.content}}</p>
                                <div class="center">
                                    <div class="center">
                                        <i class="comment icon"></i>
                                        <div class="content">
                                            <a href="#" @click="openWindow(c)">回复</a>
                                        </div>
                                    </div>
                                    <div class="center">
                                        <i class="comment icon"></i>
                                        <div class=" content">
                                            <a target="_blank" :href="'/articleDetail/'+c.articleId">查看会话</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 喜欢 -->
            <div>
                <ul>
                    <li v-for="l in likes">
                        <div class="center">
                            <a :href="'/user/' + l.userId">
                                <div class="headImage" :style="{'background-image':'url(' + l.headImage + ')'}">
                                    {{l.name}}
                                </div>
                            </a>
                            <div style="width: 68%;">
                                <p class="articleTitle">
                                    赞了您的文章
                                    <a :href="'/articleDetail/'+l.articleId">《{{l.title}}》</a>
                                </p>
                                <span class="small gray">{{l.createTime}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 点击后显示聊天详情 -->
        <div v-show="isChat" class="chat">
            <div class="center top">
                <div class="center back" @click="isChat = false">
                    <i class="reply icon"></i>
                    <div class="content">
                        <span>返回</span>
                    </div>
                </div>
                <p class="center large" v-if="responseUser">与{{responseUser.name}}聊天</p>
            </div>
            <!-- 聊天消息 -->
            <div class="communicates">
                <ul v-if="communicates">
                    <li v-for="c in communicates">
                        <div class="center left" v-if="loginUser.userId != c.responseUserId">
                            <a :href="'/user/' + loginUser.userId">
                                <div class="headImage" :style="{'background-image':'url(' + loginUser.headImage + ')'}">
                                    {{loginUser.name}}
                                </div>
                            </a>
                            <div>
                                <p class="small gray">{{c.createTime}}</p>
                                <p>{{c.content}}</p>
                            </div>
                        </div>
                        <div class="center right" v-else>
                            <div>
                                <p class="small gray">{{c.createTime}}</p>
                                <p>{{c.content}}</p>
                            </div>
                            <a :href="'/user/' + responseUser.userId">
                                <div class="headImage"
                                    :style="{'background-image':'url(' + responseUser.headImage + ')'}">
                                    {{responseUser.name}}
                                </div>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 聊天窗口 -->
            <div class="chatWindow">
                <div class="center">
                    <textarea class="prompt" type="text" placeholder="友善发言，温暖你我..." id="input"></textarea>
                </div>
                <div class="center">
                    <p class="gray">enter键直接发送</p>
                </div>
            </div>
        </div>
        <!-- 回复窗口 -->
        <div class="window" id="reply" v-show="isOpen">
            <i class="close icon" @click="isOpen = false"></i>
            <textarea class="prompt" type="text" placeholder="友善评论，温暖评论区..." id="inputTextarea"></textarea>
            <div class="center">
                <button class="ui basic button" @click="reply()">回复</button>
            </div>
        </div>
    </div>
    <script src="/js/myMessage.js"></script>
    <link rel="stylesheet" href="/css/myMessage.css">
</body>
</body>

</html>